<template>
	<BaseContainer>
		<aplid-base-crud ref="crud" class="w-100" v-bind="baseConfig">
			<template v-slot:videoPlay="{ row }">
				<el-button type="primary" link size="small" @click="handleShowPlay(row)">
					<el-icon class="mr8">
						<icon-video-one size="44" />
					</el-icon>
					查看监控
				</el-button>
			</template>
			<template v-slot:editDialog="{ row, show }">
				<HandleForm v-if="show" :nowRowData="row" @refresh="handleRefresh"></HandleForm>
			</template>
			<template v-slot:detailDialog="{ row, show }">
				<HandleForm v-if="show" :nowRowData="row" @refresh="handleRefresh" :detail="true"></HandleForm>
			</template>
		</aplid-base-crud>

		<el-dialog v-model="visible" title="监控播放" width="60%">
			<VideoPlay
        v-if="visible"
				:src="nowRowData.videoUri"
				:poster="nowRowData.posterImg"
				height="400px"
				style="width: 100%; height: 400px; border-radius: 10px"
			></VideoPlay>
		</el-dialog>
	</BaseContainer>
</template>

<script setup>
import { baseConfig } from './config'
import HandleForm from './HandleForm/index.vue'
import VideoPlay from '@/views/aplid/DetailPage/ContentListItem/FileList/videoPlay/index.vue'

const crud = ref(null)
const visible = ref(false)
const nowRowData = ref({})

const handleRefresh = () => {
	nextTick(() => {
		crud.value?.refreshChange()
	})
}

const handleShowPlay = (row) => {
	nowRowData.value = row
	visible.value = true
}
</script>

<style lang="scss" scoped></style>
